import React,{Component} from 'react';
import { connect } from 'react-redux';
import Topic from './components/Topic';
import List from './components/List';
import Recommend from './components/Recommend';
import Writter from './components/Writter';
import {HomeWrapper,HomeLeft,HomeRight} from './style';
import {actionCreators} from './store'
import {BackTop} from './style'

class Home extends Component{
  handleScrollTop(){
    window.scrollTo(0,0);
  }
  
  render(){
    return(
      <HomeWrapper>
        <HomeLeft>
          <img className="banner-img" src="//upload.jianshu.io/admin_banners/web_images/4661/7b1d09e40e2e478ae995e5e474ba703ec460c93a.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/1250/h/540" alt="540"/>
          <Topic/>
          <List/>
        </HomeLeft>
        <HomeRight>
          <Recommend />
          <Writter/>
        </HomeRight>
        {this.props.showScroll?<BackTop onClick={this.handleScrollTop}>回到顶部</BackTop>:null}
      </HomeWrapper>
    )
  }
  componentDidMount(){
    this.props.changeHomeData();
    this.bindEvents();
  }

  componentWillUnmount(){
    window.removeEventListener('scroll',this.props.changeScrollTopShow)
  }

  bindEvents(){
    window.addEventListener('scroll',this.props.changeScrollTopShow)
  }
}
const mapState=(state)=>({
  showScroll:state.getIn(['home','showScroll'])
})

const mapDispatch=(dispatch)=>({
  changeHomeData(){
    dispatch(actionCreators.getHomeInfo());
  },
  changeScrollTopShow(){
    if(document.documentElement.scrollTop>400){
      dispatch(actionCreators.toggleTopShow(true))
    }else{
      dispatch(actionCreators.toggleTopShow(false))
    }
  }
});


export default connect(mapState,mapDispatch)(Home);